<script setup lang="ts">
import { ref, computed,provide } from 'vue';
import TodoList from './TodoList.vue'; // 引入新的 TodoList 组件
import { RouterLink } from 'vue-router';
import MyCom from '../components/myCom.vue'
import { useMouse } from '../utils/mouse'
import {useRoute} from 'vue-router'


const route=useRoute()
const { x, y } = useMouse()
// 在模板中启用 v-highlight


// const vHighlight=(el:HTMLElement,binding:any)=>{
//   el.classList.add('is-highlight')
// }

const message = ref('hello,sdpt')
provide('message', message)

const myname=ref('jane')



const changeName=(newName:string)=>{
 
  myname.value=newName
}                                                                                           

const age=ref(18)
</script>                                                                                   

<template>


<!-- <RouterLink to="/about">About</RouterLink>

<RouterLink to="/aaa">not found</RouterLink> -->

<h1>{{ route.params.name }}</h1>

<h1>{{ route.params.age }}</h1>

<h1>{{ route.params.sex }}</h1>

<h1>{{ route.query.city }}</h1>
  <header>

    <div class="wrapper">
                                               

      <div class="login-link">
        <RouterLink to="/login">登录</RouterLink>
      </div>

      <div class="home-link">
        <RouterLink to="/">返回首页</RouterLink>
      </div>
    </div>
  </header>

  <ul><li v-highlight>姓名：aaa</li>
  <li v-highlight>年龄：222</li>
</ul>
<p>

  Mouse position is at: {{ x }}, {{ y }}
</p>
 
 <!-- 
  <MyCom v-model:name="myname">
<template #footer="{ uname,num }">

<ul><li v-highlight>姓名：{{ uname }}</li>
  <li v-highlight>年龄：{{ num }}</li>
</ul>
</template>



  

  </MyCom>

  <h1>年龄：{{ age }}</h1>
 -->
  <!-- {{ myname }}
@change-name="changeName"
  <input v-model="myname" /> -->
</template>

<style scoped>
header {
  width: 70%;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}


.wrapper {
  width: 100%;
  text-align: center;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.input-container {

  margin-bottom: 1.5rem;
}

.input-container input {
  flex: 1;
  max-width: 400px;
  padding: 0.75rem;
  margin-right: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.input-container button {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #42b983;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.input-container button:hover {
  background-color: #3ca97c;
}

.todo-list-container {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.todo-count {
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
}

p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 1.5rem;
}

.login-link {
  margin-top: 20px;
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}

.login-link:hover {
  text-decoration: underline;
}

/* 新增返回首页链接样式 */
.home-link {
  margin-top: 1rem;
  text-align: center;
}

.home-link a {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}

.home-link a:hover {
  text-decoration: underline;
}
</style>

